<template>
  <div>
    <van-nav-bar title="增加方案" left-text="返回" left-arrow @click-left="back()"/>
    <van-form style="margin-top: 10px" @submit="onSubmit">

      <van-cell-group inset>
        <van-field
            label="方案名称"
            v-model="param.name"
            placeholder="方案名称"/>
        <!-- 通过 pattern 进行正则校验 -->
        <van-field name="radio" label="列表类型">
          <template #input>
            <van-radio-group v-model="param.listType" direction="horizontal">
              <van-radio name="同城">同城</van-radio>
              <van-radio name="跨城">跨城</van-radio>
              <van-radio name="顺路">顺路</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <van-field name="radio" label="订单类型">
          <template #input>
            <van-radio-group v-model="param.orderType" direction="horizontal">
              <van-radio name="拼座">拼座</van-radio>
              <van-radio name="独享">独享</van-radio>
              <van-radio name="送货">送货</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-row>
          <van-col span="12">
            <van-field
                label="最低价格"
                v-model="param.minPrice"
                name="pattern"
                placeholder="最低价格"/>
          </van-col>
          <van-col span="12">
            <van-field
                label="最高价格"
                v-model="param.maxPrice"
                name="validator"
                placeholder="最高价格"/>
          </van-col>
        </van-row>
        <van-row>
          <van-col span="12">
            <van-field
                label="最远接路程"
                v-model="param.maxStartDistance"
                name="validatorMessage"
                placeholder="最远接路程"/>
          </van-col>
          <van-col span="12">
            <van-field
                label="最远送路程"
                v-model="param.maxEndDistance"
                placeholder="最远送路程"/>
          </van-col>
        </van-row>
        <van-row>
          <van-col span="12">
            <van-field
                label="最早日期"
                readonly
                v-model="param.minDate"
                @click="showChooseDate(1)"
                placeholder="最早日期"/>
          </van-col>
          <van-col span="12">
            <van-field
                label="最晚日期"
                readonly
                v-model="param.maxDate"
                @click="showChooseDate(2)"
                placeholder="最晚日期"/>
          </van-col>
        </van-row>
        <van-row>
          <van-col span="12">
            <van-field
                v-model="param.minTime"
                label="最早时间"
                placeholder="最早时间"
                @click="showTimePick(1)"/>
          </van-col>
          <van-col span="12">
            <van-field
                v-model="param.maxTime"
                label="最晚时间"
                placeholder="最晚时间"
                @click="showTimePick(2)"/>
          </van-col>
        </van-row>
        <van-row>
          <van-col span="12">
            <van-field
                label="最少人数"
                v-model="param.minPeople"
                placeholder="最少人数"/>
          </van-col>
          <van-col span="12">
            <van-field
                label="最多人数"
                v-model="param.maxPeople"
                placeholder="最多人数"/>
          </van-col>
        </van-row>
        <van-row>
          <van-col span="12">
            <van-field
                label="最低顺路度"
                v-model="param.minSame"
                placeholder="最多人数"/>
          </van-col>
          <van-col span="12">
            <van-field
                label="乘客最低分数"
                v-model="param.minScore"
                placeholder="乘客最低分数"/>
          </van-col>
        </van-row>
        <van-field
            label="最低单价"
            v-model="param.minPerPrice"
            placeholder="最低单价"/>
        <van-field
            label="目标城市"
            v-model="param.whiteList"
            placeholder="目标城市"/>
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>

    <van-calendar v-model:show="showDate" @confirm="onDateConfirm"/>

  </div>
</template>

<script>
import store from '../store/index'

export default {
  name: "Add",
  data() {
    return {
      param: {
        name: '方案名称',
        minPrice: 30,
        maxPrice: 300,
        maxStartDistance: 3,
        maxEndDistance: 10,
        listType: '同城',
        orderType: '独享',
        minDate: "4-20",
        maxDate: "5-1",
        minTime: "06.00",
        maxTime: "08.00",
        minPeople: 1,
        maxPeople: 4,
        minScore: 5,
        minPerPrice: 1.4,
        minSame: 85,
        dateFlag:-1,
        whiteList: '',
        blackList: '',
        checked: false,
      },
      minChooseDate: new Date(),
      maxChooseDate: new Date(),
      showDate: false,
      showPickTime: false,
      currentTime: '12:00'
    }
  },
  methods: {
    onDateConfirm(date) {
      const month = date.getMonth() + 1;
      const day = date.getDate();
      if (this.dateFlag===1){
        this.param.minDate=this.formatTen(month)+"-"+this.formatTen(day);
      }else {
        this.param.maxDate=this.formatTen(month)+"-"+this.formatTen(day);
      }
      this.showDate=false
    },
    formatTen(a){
      if(a>=10){
        return a+""
      }else{
        return "0"+a
      }
    },
    onSubmit() {

      let exist = false;
      store.state.plans.forEach(item => {
        if (item.name === this.param.name) {
          exist = true
        }
      })
      if (exist) {
        alert("名称已存在")
        return
      }
      store.commit('addPlan', this.param)
      this.$router.go(-1)
    },
    back() {
      this.$router.go(-1)
    },
    onConfirmTime(time) {

    },
    showChooseDate(flag) {
      this.dateFlag=flag
      this.showDate = true
    },
    showTimePick(flag) {
      this.showPickTime = true
    }
  }
}
</script>

<style scoped>

</style>